<template>
  <div style="margin-bottom: 10px;">
    <el-checkbox v-model="checked" border class="checkbox-border" @change="event => assetsChange(event, assetsIndex)">
      <div :class="[ assetsList.onlineTime ? 'connectColor' : 'disconnectColor' , 'car-img']">
        <el-image
          style="width: 24px; height: 24px"
          :src="require('@/assets/img/toumingcar.png')"
          fit="fill">
        </el-image>
      </div>
      <div style="display: inline-block;">
        <i class="el-icon-mobile-phone"></i>
        <el-image
          style="width: 16px; height: 16px"
          :src="require('@/assets/img/sign'+ (assetsList.signal || '0') +'.png')"
          fit="fill">
        </el-image>
        <span class="batterybar">
          <span class="battery">
            <span class="battery-line" :title="quantity + '%'" :style="{ width: '${quantity}%' }"></span>
          </span>
          <span>{{ quantity }}%</span>
        </span>
      </div>
      <div>
        <span>{{ assetsList.facilityName }}</span>
        <span>{{ assetsList.onlineTime ? ('在线' + onlineTime) : '离线' }}</span>
      </div>
    </el-checkbox>
  </div>
</template>

<script>

export default {
  name: 'one-car',

  props: ['assetsList', 'assetsIndex'],

  data() {
    return {
      loading: false,
      checked: false,
      assetInfo: {}
    }
  },

  computed: {
    quantity() {
      return this.assetsList.voltage
    },

    onlineTime() {
      let time = this.assetsList.onlineTime - this.assetsList.createTime
      let onlineT = time/86400
      if(onlineT > 0 && onlineT < 1) {
        onlineT = (onlineT * 24).toFixed(0)
        return onlineT + '小時'
      }
      onlineT = onlineT ? onlineT.toFixed(0) + '天' : '离线'
      return onlineT
    }
  },

  methods: {
    assetsChange(e, info) {
      //e 为复选框选中状态 true/false
      //info为选中的复选框索引 0/1/2...
      this.loading = true
      this.$store.dispatch('map/changeAssets', { info: info, isSelect: e, facilityName: this.assetsList.facilityName })
      this.$emit('setMap')
    },
  }
}
</script>

<style scoped lang="scss">
@import "../../../assets/css/them.scss";

.car-img {
  padding: 4px 0 0 4px;
  border-radius: 50%;
  display: inline-block;
  width: 32px;
  height: 32px;
}

.checkbox-border {
  height: auto;
  width: 100%;
}

.batterybar .battery {
    position: relative;
    border: 1px solid #9c9c9c;
    padding: 1px;
    width: 16px;
    height: 10px;
    display: inline-block;
}

.batterybar .battery:before {
    content: "";
    position: absolute;
    right: -3.3px;
    top: 50%;
    height: 50%;
    width: 2px;
    background-color: #9c9c9c;
    -webkit-transform: translate(0, -50%);
    transform: translate(0, -50%);
}

.batterybar .battery .battery-line {
  width: 100%;
  height: 100%;
  background-color: #1fd330;
  display: block;
}

.disconnectColor {
  background: $disconnectColor;
}

.connectColor {
  background: $borderColor;
}
</style>
